<template>
  <view class="page">
    <!--		总分-->
    <view class="total-score block">
     <!-- <qiunDataCharts
        type="arcbar"
        :canvas2d="true"
        canvasId="IFvhKiAfOYGCvEmhtcfnhaTDVoWcWrs"
        :opts="arcbarOpts"
        :chartData="arcbarChartData"
      ></qiunDataCharts> -->
      <view class="divide-line"></view>
      <view class="item">
        <view class="label">试卷总分：</view>
        <view class="value">{{ `${userDoPaperScoreData.paperScore} 分` }}</view>
      </view>
      <view class="item">
        <view class="label">试卷名称：</view>
        <view class="value">{{ userDoPaperScoreData.structureName }}</view>
      </view>
      <view class="item">
        <view class="label">交卷时间：</view>
        <view class="value">{{ userDoPaperScoreData.doPaperTime }}</view>
      </view>
    </view>
    <!--		试卷最高分 \ 平均分 \ 已击败考生-->
    <!--		只有是会员才能看-->
    <!--		超过100个人提交才展示-->
    <view class="statistic block" v-if="userOtherScore.peopleNum > 100">
      <view class="open-vip-btn" v-if="!isVip">
        <view class="btn" @click="() => $refs.checkIsVip.checkIsVip()">点击查看</view>
      </view>
      <view class="item">
        <view class="value orange" v-if="isVip">
          <text class="number">{{ userOtherScore.maxScore }}</text>
          <text class="text">分</text>
        </view>
        <view class="label">试卷最高分</view>
      </view>
      <view class="item">
        <view class="value blue" v-if="isVip">
          <text class="number">{{ userOtherScore.avgScore }}</text>
          <text class="text">分</text>
        </view>
        <view class="label">平均分</view>
      </view>
      <view class="item">
        <view class="value green" v-if="isVip">
          <text class="number">{{ userOtherScore.defeatRatio }}</text>
          <text class="text">%</text>
        </view>
        <view class="label">已击败考生</view>
      </view>
    </view>
    <!--		得分分布图-->
    <!--		提交人数超过100人才展示-->
<!--		暂时注释掉-->
<!--    <view class="block scoring-chart" v-show="userOtherScore.peopleNum > 100">-->
<!--      <view class="title">-->
<!--        <view class="point"></view>-->
<!--        <view class="text">得分分布图</view>-->
<!--      </view>-->
<!--      <view style="margin-top: 20rpx">-->
<!--        &lt;!&ndash;				只有vip才能查看&ndash;&gt;-->
<!--        <qiunDataCharts-->
<!--          v-if="isVip"-->
<!--          :tooltipShow="false"-->
<!--          type="area"-->
<!--          :canvas2d="true"-->
<!--          canvasId="LFAITXRRzbQTXnSkXczbZDVxuHxxyzwu"-->
<!--          :opts="lineChartOpts"-->
<!--          :chartData="lineChartData"-->
<!--        ></qiunDataCharts>-->
<!--        <view class="btn-container" v-else>-->
<!--          <view class="open-vip" @click="() => $refs.checkIsVip.checkIsVip()">点击查看</view>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
    <!--		答题情况-->
    <view class="block answer-to-question">
      <view class="title">
        <view class="point"></view>
        <view class="text">答题情况</view>
      </view>
      <!--			总览-->
      <view class="overview">
        <view class="item">
          <view class="label">一共</view>
          <view class="value blue">
            <text class="number">{{ userDoPaperScoreData.doTopicNum }}</text>
            <text class="text">\t题</text>
          </view>
        </view>
        <view class="item">
          <view class="label">答对</view>
          <view class="value green">
            <text class="number">{{ userDoPaperScoreData.rightTopicNum }}</text>
            <text class="text">\t题</text>
          </view>
        </view>
        <view class="item">
          <view class="label">答错</view>
          <view class="value red">
            <text class="number">{{ userDoPaperScoreData.errorTopicNum }}</text>
            <text class="text">\t题</text>
          </view>
        </view>
        <view class="item">
          <view class="label">未答</view>
          <view class="value red">
            <text class="number">{{ userDoPaperScoreData.noDoNum }}</text>
            <text class="text">\t题</text>
          </view>
        </view>
        <view class="item">
          <view class="label">总用时</view>
          <view class="value blue">
            <template v-if="userDoPaperScoreData.useTime < 60">
              <text class="number">{{ userDoPaperScoreData.useTime }}</text>
              <text class="text">\t秒</text>
            </template>
            <template v-else>
              <text class="number">{{ dateUtils.formatTimeObject(userDoPaperScoreData.useTime).m }}</text>
              <text class="text">\t分</text>
            </template>
          </view>
        </view>
      </view>
    </view>
    <view class="block question-list-container">
      <view class="title">
        <view class="point"></view>
        <view class="text">题目详情</view>
      </view>
      <!--			题目列表-->
      <topicList :topicScoreDataList="topicScoreDataList" :query-params="queryParams" ref="topicList"></topicList>
    </view>
    <check-is-vip ref="checkIsVip"></check-is-vip>
  </view>
</template>

<script>
import request from "@/utils/request"
// import qiunDataCharts from "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
import dateUtils from "@/utils/dateUtils"
import foldIcon from "./assets/fold.png"
import unfoldIcon from "./assets/unfold.png"
import { handleUrlParams, isVip } from "@/utils"
import websocket from "@/utils/websocket"
import checkIsVip from "@/components/checkIsVip/index.vue"
import TopicList from "./components/topicList.vue"
export default {
  data() {
    return {
      userOtherScore: {
        maxScore: 0,
        avgScore: 0,
        defeatRatio: 0,
        exceedNum: 0,
        peopleNum: 0,
      },
      userDoPaperScoreData: {
        doPaperId: "",
        userId: "",
        structureParentId: "",
        structureName: "",
        totalScore: 0,
        doTopicNum: 0,
        totalTopicNum: 0,
        rightTopicNum: 0,
        errorTopicNum: 0,
        noDoNum: 0,
        useTime: 0,
        doPaperDate: "",
        doPaperTime: "",
        createTime: "",
        isComplete: 0,
        paperScore: 0,
      },
      topicScoreDataList: [],
      distributionChart: [],
      queryParams: {
        doPaperId: "",
        structureParentId: "",
      },
      // 环形进度条图表数据
      arcbarChartData: {
        series: [
          {
            name: "正确率",
            color: "#2fc25b",
            data: 0,
          },
        ],
      },
      foldIcon,
      unfoldIcon,
      //得分分布图折线图图表设置
      lineChartOpts: {
        dataPointShape: false,
        dataLabel: false,
        enableScroll: false,
        legend: {
          show: true,
        },
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          disabled: true,
          disableGrid: true,
        },
        extra: {
          area: {
            type: "curve",
            opacity: 0.2,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: "none",
          },
        },
      },
      //得分分布图折线图图表数据
      lineChartData: {
        categories: [],
        series: [
          {
            name: "分数",
            data: [],
            connectNulls: true,
          },
        ],
      },
      isVip: false, // 是否是VIP
    }
  },
  computed: {
    dateUtils() {
      return dateUtils
    },
    // 环形进度条图表配置
    arcbarOpts() {
      return {
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        title: {
          name: "选择题得分",
          fontSize: 20,
          color: "#95939F",
        },
        subtitle: {
          name: this.userDoPaperScoreData.totalScore.toString(),
          fontSize: 35,
          color: "#1C1F22",
        },
        extra: {
          arcbar: {
            type: "default",
            width: 12,
            backgroundColor: "#E9E9E9",
            startAngle: 0.75,
            endAngle: 0.25,
            gap: 2,
            linearType: "custom",
          },
        },
      }
    },
  },
  components: { TopicList, checkIsVip },
  onLoad(query) {
    this.queryParams.doPaperId = query.doPaperId
    this.queryParams.structureParentId = query.structureParentId
  },
  onShow() {
    isVip().then((res) => {
      this.isVip = res
    })
    websocket.trackCurrentPage("我的刷题").catch(() => {})
    this.getDetails()
  },
  methods: {
    // 获取统计数据
    getDetails() {
      request({
        url: "brushQuestions/getPaperStructureList",
        data: {
          doPaperId: this.queryParams.doPaperId,
          structureParentId: this.queryParams.structureParentId,
        },
        showLoading: true,
        errorHandle: true,
      }).then((data) => {
        this.userOtherScore = data.userOtherScore
        this.userDoPaperScoreData = data.userDoPaperScoreData
        this.topicScoreDataList = data.topicScoreDataList
        this.distributionChart = data.distributionChart
        // 设置环形进度条图表数据
        this.arcbarChartData.series[0].data = this.userDoPaperScoreData.totalScore / this.userDoPaperScoreData.paperScore
        // 设置得分分布图折线图图表数据
        const categories = []
        const seriesData = []
        for (let i = 0; i < this.distributionChart.length; i++) {
          //头部或者尾部
          if (i === 0 || i === this.distributionChart.length - 1) {
            categories.push(this.distributionChart[i].min.toString())
            seriesData.push(this.distributionChart[i].num)
            continue
          }
          //中间
          categories.push("")
          seriesData.push(this.distributionChart[i].num)
          //不是最后一个
          if (i < this.distributionChart.length - 2) {
            categories.push(this.distributionChart[i].max.toString())
            seriesData.push(null)
          }
        }
        this.lineChartData.categories = categories
        this.lineChartData.series[0].data = seriesData
        //初始化子组件
        this.$nextTick(() => {
          this.$refs.topicList && this.$refs.topicList.init()
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: var(--gray-background-color);
  padding: {
    top: 30rpx;
    left: 30rpx;
    right: 30rpx;
    bottom: calc(30rpx + env(safe-area-inset-bottom));
  }
  .block {
    background: var(--background-color);
    border-radius: 20rpx;
    &:not(:last-child) {
      margin-bottom: 30rpx;
    }
    .title {
      display: flex;
      align-items: center;
      .point {
        width: 10rpx;
        height: 30rpx;
        background: var(--theme-color);
        margin-right: 14rpx;
      }
      .text {
        font-size: 34rpx;
        font-weight: bold;
        line-height: 1;
      }
    }
  }
  .total-score {
    padding: 30rpx;
    .divide-line {
      height: 2rpx;
      background: var(--border-color);
    }
    .item {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      color: var(--text-color-light);
      font-size: 32rpx;
    }
  }
  .statistic {
    display: flex;
    justify-content: space-between;
    padding: 50rpx;
    flex-wrap: wrap;
    .open-vip-btn {
      width: 100%;
      display: flex;
      justify-content: center;
      padding: 20rpx 0;
      .btn {
        width: 200rpx;
        height: 60rpx;
        background: var(--theme-color);
        color: var(--text-color-white);
        border-radius: 30rpx;
        font-size: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .value {
        font-weight: bold;
        .number {
          font-size: 50rpx;
        }
        .text {
          font-size: 30rpx;
        }
        &.orange {
          color: #f48229;
        }
        &.blue {
          color: #467cf1;
        }
        &.green {
          color: #3cb991;
        }
      }
      .label {
        margin-top: 20rpx;
        font-size: 30rpx;
        color: var(--text-color-light);
      }
    }
  }
  .scoring-chart {
    padding: 30rpx;
    .btn-container {
      margin-top: 30rpx;
      display: flex;
      .open-vip {
        background: var(--theme-color);
        color: var(--text-color-white);
        padding: 10rpx 20rpx;
        border-radius: 30rpx;
        font-size: 30rpx;
      }
    }
  }
  .answer-to-question {
    padding: 30rpx;
    .overview {
      display: flex;
      background: #f6f7fb;
      padding: 20rpx 0;
      margin-top: 30rpx;
      .item {
        width: 0;
        flex: 1;
        &:not(:last-child) {
          border-right: 2rpx solid #e8e8e8;
        }
        display: flex;
        flex-direction: column;
        align-items: center;
        .blue {
          color: #5d77c9;
        }
        .green {
          color: #57bd95;
        }
        .red {
          color: #c77175;
        }
        .label {
          color: var(--text-color-light);
          font-size: 30rpx;
        }
        .value {
          margin-top: 20rpx;
          .number {
            font-size: 36rpx;
          }
          .text {
            font-size: 30rpx;
          }
        }
      }
    }
  }
  .question-list-container {
    padding: 30rpx;
  }
}
</style>
